import { PlusCircleOutlined } from '@ant-design/icons';
import { Button, Space, Table } from 'antd';
import classNames from 'classnames';
import React, { useMemo, useState } from 'react';

import CusDrawer from '@/components/CusDrawer';
import ExaminationDetail from '@/components/resourceLibraryComp/ExaminationDetail';
import { isEmpty } from 'lodash-es';
import OStyle from './index.less';
import { QueTableProps } from './interface';

const DRAWERWIDTH = 480;
const QueTable: React.FC<QueTableProps> = (props) => {
  const { questions, onQuestionsRemove, onAddQuestion, scoreTypeName, hideModifyTime } = props;

  const [currExaminationId, setCurrExaminationId] = useState<string>();
  const [drawerOpen, setDrawerOpen] = useState(false);
  //课件详情drawer 配置
  const drawerConfig = useMemo(() => {
    return {
      title: scoreTypeName + '详情',
      width: DRAWERWIDTH,
      open: drawerOpen,
      onClose: () => {
        setDrawerOpen(false);
      },
      destroyOnClose: true,
      children: currExaminationId && <ExaminationDetail examinationId={currExaminationId} />,
    };
  }, [currExaminationId, drawerOpen]);

  const sharedOnCell2 = (_, index: number) => {
    return { colSpan: 2 };
  };
  const sharedOnCell = (_, index: number) => {
    return { colSpan: 0 };
  };
  const columns = useMemo(
    () => [
      {
        title: '序号',
        key: 'index',
        dataIndex: 'index',
        render: (text: any, record: any) => <span>{text + 1}</span>,
      },
      {
        title: '题目',
        key: 'name',
        dataIndex: 'name',
      },
      {
        title: '修改时间',
        key: 'modifyTime',
        colSpan: hideModifyTime ? 0 : 1,
        dataIndex: 'modifyTime',
        render: (text: any, record: any) => <span>{record.origin.modifyTime}</span>,
        onCell: hideModifyTime ? sharedOnCell : '',
      },
      {
        title: '操作',
        key: 'action',
        // width: 350,
        // colSpan: hideModifyTime ? 2 : 1,
        render: (text: any, record: any) => {
          return (
            <Space direction="horizontal" size={0}>
              {record.resourceType !== 1 && (
                <Button
                  type="text"
                  size="small"
                  onClick={(e: React.MouseEvent) => {
                    e.stopPropagation();
                    setCurrExaminationId(record.id);
                    setDrawerOpen(true);
                  }}
                >
                  <span className="safe-edu_table_operation_text">详情</span>
                </Button>
              )}
              <Button
                type="text"
                size="small"
                onClick={(e: React.MouseEvent) => {
                  e.stopPropagation();
                  onQuestionsRemove(record.id);
                }}
              >
                <span className="safe-edu_table_operation_text">删除</span>
              </Button>
            </Space>
          );
        },
        // onCell: hideModifyTime ? sharedOnCell2 : '',
      },
    ],
    [questions.length],
  );

  return (
    <>
      <CusDrawer {...drawerConfig} />
      <div className={OStyle.question_table_box}>
        {!isEmpty(questions) && (
          <Table columns={columns} pagination={false} size="small" dataSource={questions} rowKey="id" />
        )}
        <div className={classNames(OStyle.box_add, { [`${OStyle.add_no_empty}`]: !isEmpty(questions) })}>
          {isEmpty(questions) && <p className={OStyle.add_empty_text}>从资料库中选择对应题目</p>}
          <Button type="default" size="middle" icon={<PlusCircleOutlined />} onClick={onAddQuestion}>
            {isEmpty(questions) ? '立即添加' : '继续添加'}
          </Button>
        </div>
      </div>
    </>
  );
};

export default QueTable;
